<template>
	<div>
		<transition :name="transitionName">			
			<router-view />			
		</transition>
	</div>
</template>

<script>

	export default{
		data(){
			return{
				transitionAnimateEnter:'slideInRight animated',
				transitionAnimateLeave:'slideOutLeft animated',
				transitionName:'right'
			}
		},
		watch:{
			'$route'(){
				// console.log(this.$route.query.key)
				if(typeof(this.$route.query.key) == 'boolean'){
					this.transitionName = 'right'		
				}else{
					this.transitionName = 'left'		
				}
				// console.log(this.transitionAnimateEnter)
			}

		},		
	}
</script>

<style scoped="scoped">
	.animated{
		-webkit-animation-duration: .4s;
  		animation-duration: .4s;
	}

</style>